<!-- 分类页 -->
<template>
  <div class="category-main">
    <van-search placeholder="商品搜索" input-align="center" />
    <van-sidebar v-model="nowIndex">
      <van-sidebar-item :title="item.name" v-for="item in categoryNavigation" :key="item.id" @click="getNavigationList(item.id)"/>
    </van-sidebar>
    <div class="categoryRight">
       <div class="categoryImg">
         <img :src="categoryList.wap_banner_url" alt="">
       </div>
       <div class="categoryTitle">--- {{categoryList.name}}分类 ---</div>
       <div class="categoryList">
         <div class="categoryItem" v-for="item in categoryProduct" :key="item.id" @click="goCategoryList(item.id)">
           <img  class="producItemImg" :src="item.wap_banner_url" alt="">
           <div class="productName">{{item.name}}</div>
         </div>
       </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Sidebar, SidebarItem } from "vant";
import categoryApi from '@/api/category/index'

Vue.use(Sidebar);
Vue.use(SidebarItem);
export default {
  name: "category",
  data() {
    return {
      nowIndex: 0,
      categoryNavigation:[],
      categoryList:[],
      categoryProduct:[],
      id:1005000

    };
  },
  created() {
    this.getNavigation()
    this.getNavigationList(this.id)

  },
  methods:{
    //侧边栏导航
   async getNavigation(){
     await categoryApi.categoryNavigation()
      .then(res=>{
        this.categoryNavigation=res.categoryList
      })
    },

    async getNavigationList(id){
     await categoryApi.categoryList({
        id:id
      })
      .then(res=>{
        this.categoryList=res.data.currentOne
        this.categoryProduct=this.categoryList.subList
      })
    },
    
    //分类列表页
    goCategoryList(id){
      this.$router.push({name:'categoryList',params:{id}})
    }
  }
};
</script>
<style lang='scss' scoped>
.category-main {
  height: 1000px;
  background-color: #fff;
  .van-search {
    border: 1px solid #f3f3f3;
    .van-search__content {
      background-color: #ededed;
    }
  }
  .van-sidebar{
    float: left;
    .van-sidebar-item{
      text-align: center;
      background-color: #fff;
      border-right: 1px solid #FBFBFB;
    }
     .van-sidebar-item--select::before{
      height: 90%;
      width:3px;
      background-color: $baseColor;
    }
    .van-sidebar-item--select, .van-sidebar-item--select:active{
      font-size: 18px;
      color: $baseColor;
    }
  }
  .categoryRight{
    float: left;
    margin: 0 11px;
    width: 273px;
    .categoryImg{
      margin-top: 3px;
      width: 100%;
      img{
         width: 100%;
         height: 110px;
      }
    }
    .categoryTitle{
      height: 66px;
      line-height: 66px;
      text-align: center;
    }
    .categoryList{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .categoryItem{
        width: 88px;
        height: 88px;
        text-align: center;
        padding-bottom: 5px;
        .producItemImg{
          width: 72px;
          height: 72px;
        }
      }
    }
  }
  
}

</style>